<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有声小说，听小说</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 头部start -->
    <header>
        <div class="wrap">
            <div class="header-left left clear">
                <img src="./image/logo.PNG" alt="">
                <ul class="right clear">
                    <li><a href="#">发现</a>
                    </li>
                    <li class="hov1"><a href="#">频道</a>
                        <img src="./image/d_a.gif" alt="">
                        <i class="red-1"></i>
                        <i class="red-2"></i>
                    </li>
                    <li class="hov2">
                        <a href="#">我的</a>
                        <!-- <i class="red-1"></i> -->
                        <i class="red-3"></i>
                    </li>
                </ul>
            </div>
            <div class="header-middle left clear">
                <form action="">
                    <input type="text" placeholder="专辑/声音/用户">
                    <img src="../喜马拉雅/image/搜索.PNG" alt="">
                    <!-- <input type="submit" src="./image/搜索.PNG"> -->
                </form>
            </div>
            <div class="header-right right">
                <ul class="clear">
                    <li>
                        <a href="./shangchuanzhongxin.html">
                            <img src="./image/nav-1.PNG" alt="">
                            <p> 上传</p>
                        </a>
                    </li>
                    <li>
                        <img src="./image/nav-2.PNG" alt="">
                        <p>创作中心</p>
                    </li>
                    <li>
                        <a href="./youshengshuchuban.html">
                            <img src="./image/nav-3.PNG" alt="">
                            <p>有声出版</p>
                        </a>
                    </li>
                    <li>
                        <img src="./image/nav-4.PNG" alt="">
                        <p>客户端</p>
                    </li>
                    <li>
                        <a href="./denglu.html"><img src="./image/nav-denglu.png" alt="" class="denglu img"></a>
                    </li>
                </ul>
            </div>
        </div>
    </header>
    <!-- 头部end -->
    <!-- 轮播图start -->
    <div class="lunbo wrap">
        <!-- 箭头 -->
        <i class="left"></i>
        <i class="right"></i>
    </div>
    <!-- 轮播图end -->
    <!-- 分类start -->
    <div class=" start top30 wrap">
        <ul>
            <li class="start-tu">
                <img src="../喜马拉雅/image/分类.PNG" alt="">
                <p>分类</p>
            </li>
            <li class="fenge"></li>
            <li class="start-tu">
                <img src="../喜马拉雅/image/频道.PNG" alt="">
                <p>频道</p>
            </li>
            <li class="fenge"></li>
            <li class="start-tu">
                <img src="../喜马拉雅/image/排行.PNG" alt="">
                <p class="on">排行榜</p>
            </li>
            <li class="fenge">


            </li>
            <li class="start-wen ">
                <p> <span class="start1 left">小说</span><i class="t00"></i><span class="start2">男频小说</span><span class="start2"></span></p>
                <p><span class=" start1 left "> 广播</span><i class="t00 "></i><span class="start2 ">本地台</span><span class="start2">国家台</span></p>
            </li>
            <li class="start-wen clear">
                <p> <span class="start1 left">相声</span><i class="t00"></i><span class="start2">郭麒麟</span><span class="start2">岳云鹏</span></p>
                <p><span class=" start1 left "> 科技</span><i class="t00 "></i><span class="start2 ">互联网</span><span class="start2">人工智能</span></p>
            </li>
            <li class=" start-wen ">
                <p> <span class="start1 left">音乐</span><i class="t00"></i><span class="start2">电音</span><span class="start2">流行</span></p>
                <p><span class=" start1 left ">健康</span><i class="t00 "></i><span class="start2 ">健康常识</span><span class="start2">黄帝内经</span></p>
            </li>
            <li class="start-wen start001 ">
                <p> <span class="start1 left">建党百年</span><i class="t00"></i><span class="start2">听党课</span><span class="start2">学党史</span></p>
                <p><span class=" start1 left ">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;头条</span><i class="t00 "></i><span class="start2 ">实施快讯</span><span class="start2">全球资讯</span></p>
            </li>

        </ul>
    </div>
    <!-- 分类end -->
    <!-- 内容1 start -->
    <article class="wrap clear">
        <div class="content1-left left">
            <div class="con1left-top clear">
                <div class="clt-left left clear">
                    <i class="gg-tubiao left"></i>
                    <h2 class="left">猜你喜欢</h2>
                </div>
                <div class="clt-right right">
                    <img src="../喜马拉雅/image/刷新.png" onMouseOver="this.src=' ../喜马拉雅/image/刷新-变色.png'" onMouseOut="this.src='../喜马拉雅/image/刷新.png'">
                    <span>换一批</span>
                </div>
            </div>
            <div class="conleft-botom clear">
                <ul>
                    <li>

                        <img src="../喜马拉雅/image/喜欢1.PNG" />
                        <img src="./image/暂停.png" class="teli" />
                        <p class="timu"> 米小圈上学记：一二...</p>

                        <p class="zuozhe">米小圈</p>
                    </li>
                    <li> <img src="../喜马拉雅/image/喜欢2.PNG" /> <img src="./image/暂停.png" class="teli" />
                        <p class="timu"> 摸金天师（紫襟演播）
                        </p>
                        <p class="zuozhe">有声的紫禁</p>
                    </li>
                    <li> <img src="../喜马拉雅/image/喜欢3.PNG" /> <img src="./image/暂停.png" class="teli" />
                        <p class="timu"> 首席医官</p>
                        <p class="zuozhe">阿陈书场</p>
                    </li>
                    <li> <img src="../喜马拉雅/image/喜欢4.PNG" /> <img src="./image/暂停.png" class="teli" />
                        <p class="timu"> 晚安妈妈睡前故事</p>
                        <P class="zuozhe">晚安妈妈</P>
                    </li>
                    <li> <img src="../喜马拉雅/image/喜欢5.PNG" /> <img src="./image/暂停.png" class="teli" />
                        <p class="timu"> 郭德纲单口相声精选</p>
                        <p class="zuozhe">德云社郭德纲相声VIP</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="content1-right right clear">
            <div class="cont1r-top">
                <img src="../喜马拉雅/image/nav-denglu.png" alt="">
                <span>登陆一下，让我了解你</span>
            </div>
            <div class="cont1r-middle ">
                <div class=".chengqi" style="color:#F9F9FA;">1
                </div>
                <a href="./denglu.html">
                    <div class="denglu-anniu">登录</div>
                </a>
                <div class=".chengqi2" style="color:#F9F9FA; height: 40px;">1</div>

            </div>
            <div class="cont1r-footer">
                <div class="con1rf-left left clear">
                    <p>下载客户端</p>
                    <ul>
                        <li>iPhone</li>
                        <li>Android</li>
                    </ul>
                </div>
                <div class="con1rf-right right">
                    <img src="../喜马拉雅/image/二维码.png" alt="">
                </div>
            </div>

        </div>
    </article>
    <!-- 内容1 end -->

    <!-- 内容2 start -->
    <article class="wrap clear top30">
        <div class="content1-left left">
            <div class="con1left-top clear">
                <div class="clt-left left clear">
                    <i class="gg-tubiao left"></i>
                    <h2 class="left">有声书</h2>
                    <div class="liebiao">
                        <ul class="clear">
                            <li><a href="#">免费有声小说</a><i class="jiange">|</i></li>
                            <li><a href="#">ria</a><i class="jiange">|</i></li>
                            <li><a href="#">盗墓笔记</a><i class="jiange">|</i></li>
                            <li><a href="#">有声的紫禁</a><i class="jiange">|</i></li>
                            <li><a href="#">斗破苍穹</a><i class="jiange">|</i></li>
                            <li><a href="#">你是我的荣耀</a><i class="jiange">|</i></li>
                            <li><a href="#">平凡的世界</a></li>
                        </ul>
                    </div>
                </div>
                <div class="clt-right right">

                    <span style="color: #72727B;">更多</span>
                </div>
            </div>
            <div class="conleft-botom clear">
                <ul>
                    <li class="shangbianju">
                        <img src="../喜马拉雅/image/喜欢1.PNG" /> <img src="./image/暂停.png" class="teli" />
                        <p class="timu"> 米小圈上学记：一二...</p>
                        <p class="zuozhe">米小圈</p>
                    </li>
                    <li class="shangbianju"> <img src="../喜马拉雅/image/喜欢2.PNG" /> <img src="./image/暂停.png" class="teli" />
                        <p class="timu"> 摸金天师（紫襟演播）
                        </p>
                        <p class="zuozhe">有声的紫禁</p>
                    </li>
                    <li class="shangbianju"> <img src="../喜马拉雅/image/喜欢3.PNG" /> <img src="./image/暂停.png" class="teli" />
                        <p class="timu"> 首席医官</p>
                        <p class="zuozhe">阿陈书场</p>
                    </li>
                    <li class="shangbianju"> <img src="../喜马拉雅/image/喜欢4.PNG" /> <img src="./image/暂停.png" class="teli" />
                        <p class="timu"> 晚安妈妈睡前故事</p>
                        <P class="zuozhe">晚安妈妈</P>
                    </li>
                    <li class="shangbianju"> <img src="../喜马拉雅/image/喜欢5.PNG" /> <img src="./image/暂停.png" class="teli" />
                        <p class="timu"> 郭德纲单口相声精选</p>
                        <p class="zuozhe">德云社郭德纲相声VIP</p>
                    </li>
                    <li class="shangbianju">
                        <img src="../喜马拉雅/image/喜欢1.PNG" /> <img src="./image/暂停.png" class="teli" />
                        <p class="timu"> 米小圈上学记：一二...</p>
                        <p class="zuozhe">米小圈</p>
                    </li>
                    <li class="shangbianju"> <img src="../喜马拉雅/image/喜欢2.PNG" /> <img src="./image/暂停.png" class="teli" />
                        <p class="timu"> 摸金天师（紫襟演播）
                        </p>
                        <p class="zuozhe">有声的紫禁</p>
                    </li>
                    <li class="shangbianju"> <img src="../喜马拉雅/image/喜欢3.PNG" /> <img src="./image/暂停.png" class="teli" />
                        <p class="timu"> 首席医官</p>
                        <p class="zuozhe">阿陈书场</p>
                    </li>
                    <li class="shangbianju"> <img src="../喜马拉雅/image/喜欢4.PNG" /> <img src="./image/暂停.png" class="teli" />
                        <p class="timu"> 晚安妈妈睡前故事</p>
                        <P class="zuozhe">晚安妈妈</P>
                    </li>
                    <li class="shangbianju"> <img src="../喜马拉雅/image/喜欢5.PNG" /> <img src="./image/暂停.png" class="teli" />
                        <p class="timu"> 郭德纲单口相声精选</p>
                        <p class="zuozhe">德云社郭德纲相声VIP</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="content1-right right clear">
            <div class="cont2r-top">
                有声书新品
            </div>
            <ul>
                <li>
                    <a href="#" class="clear">
                        <div class="a-left left">
                            <img src="./image/喜欢3.PNG" alt="">
                            <img src="./image/暂停.png" alt="" class="zanting">
                        </div>
                        <div class="a-right left">
                            <p> [新品限免]&nbsp;&nbsp;黑轴|周建...</p>
                            <p> 周建龙&nbsp;|&nbsp;中广影音</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#" class="clear">
                        <div class="a-left left">
                            <img src="./image/喜欢5.PNG" alt="">
                            <img src="./image/暂停.png" alt="" class="zanting">
                        </div>
                        <div class="a-right left">
                            <p> [新品限免]&nbsp;&nbsp;黑轴|周建...</p>
                            <p> 周建龙&nbsp;|&nbsp;中广影音</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#" class="clear">
                        <div class="a-left left">
                            <img src="./image/喜欢2.PNG" alt="">
                            <img src="./image/暂停.png" alt="" class="zanting">
                        </div>
                        <div class="a-right left">
                            <p> [新品限免]&nbsp;&nbsp;黑轴|周建...</p>
                            <p> 周建龙&nbsp;|&nbsp;中广影音</p>
                        </div>
                    </a>
                </li>
                <li class="title-biaoti">
                    <span class="change"> 4</span>
                    <span class="change">&nbsp;&nbsp;德云社岳云鹏相声专场布里斯本站2...</span>
                </li>
                <li class="title-biaoti">
                    <span class="change"> 5</span>
                    <span class="change">&nbsp;&nbsp;德云六队&nbsp;|&nbsp;德云社经典相声合集</span>

                </li>
                <li class="title-biaoti">
                    <span class="change"> 6</span>
                    <span class="change">&nbsp;&nbsp;德云四队&nbsp;|&nbsp;德云社经典相声合集</span>

                </li>
            </ul>
        </div>
    </article>
    <!-- 内容2 end -->
    <!-- 内容3 start -->
    <article class="wrap clear top30">
        <div class="content1-left left">
            <div class="con1left-top clear">
                <div class="clt-left left clear">
                    <i class="gg-tubiao left"></i>
                    <h2 class="left">相声评书</h2>
                    <div class="liebiao">
                        <ul class="clear">
                            <li><a href="#">免费有声小说</a><i class="jiange">|</i></li>
                            <li><a href="#">ria</a><i class="jiange">|</i></li>
                            <li><a href="#">盗墓笔记</a><i class="jiange">|</i></li>
                            <li><a href="#">有声的紫禁</a><i class="jiange">|</i></li>
                            <li><a href="#">斗破苍穹</a><i class="jiange">|</i></li>
                            <li><a href="#">你是我的荣耀</a><i class="jiange">|</i></li>
                            <li><a href="#">平凡的世界</a></li>
                        </ul>
                    </div>
                </div>
                <div class="clt-right right">

                    <span style="color: #72727B;">更多</span>
                </div>
            </div>
            <div class="conleft-botom clear">
                <ul>
                    <li class="shangbianju">
                        <img src="../喜马拉雅/image/喜欢1.PNG" /> <img src="./image/暂停.png" class="teli" />
                        <p class="timu"> 米小圈上学记：一二...</p>
                        <p class="zuozhe">米小圈</p>
                    </li>
                    <li class="shangbianju"> <img src="../喜马拉雅/image/喜欢2.PNG" /> <img src="./image/暂停.png" class="teli" />
                        <p class="timu"> 摸金天师（紫襟演播）
                        </p>
                        <p class="zuozhe">有声的紫禁</p>
                    </li>
                    <li class="shangbianju"> <img src="../喜马拉雅/image/喜欢3.PNG" /> <img src="./image/暂停.png" class="teli" />
                        <p class="timu"> 首席医官</p>
                        <p class="zuozhe">阿陈书场</p>
                    </li>
                    <li class="shangbianju"> <img src="../喜马拉雅/image/喜欢4.PNG" /> <img src="./image/暂停.png" class="teli" />
                        <p class="timu"> 晚安妈妈睡前故事</p>
                        <P class="zuozhe">晚安妈妈</P>
                    </li>
                    <li class="shangbianju"> <img src="../喜马拉雅/image/喜欢5.PNG" /> <img src="./image/暂停.png" class="teli" />
                        <p class="timu"> 郭德纲单口相声精选</p>
                        <p class="zuozhe">德云社郭德纲相声VIP</p>
                    </li>
                    <li class="shangbianju">
                        <img src="../喜马拉雅/image/喜欢1.PNG" /> <img src="./image/暂停.png" class="teli" />
                        <p class="timu"> 米小圈上学记：一二...</p>
                        <p class="zuozhe">米小圈</p>
                    </li>
                    <li class="shangbianju"> <img src="../喜马拉雅/image/喜欢2.PNG" /> <img src="./image/暂停.png" class="teli" />
                        <p class="timu"> 摸金天师（紫襟演播）
                        </p>
                        <p class="zuozhe">有声的紫禁</p>
                    </li>
                    <li class="shangbianju"> <img src="../喜马拉雅/image/喜欢3.PNG" /> <img src="./image/暂停.png" class="teli" />
                        <p class="timu"> 首席医官</p>
                        <p class="zuozhe">阿陈书场</p>
                    </li>
                    <li class="shangbianju"> <img src="../喜马拉雅/image/喜欢4.PNG" /> <img src="./image/暂停.png" class="teli" />
                        <p class="timu"> 晚安妈妈睡前故事</p>
                        <P class="zuozhe">晚安妈妈</P>
                    </li>
                    <li class="shangbianju"> <img src="../喜马拉雅/image/喜欢5.PNG" /> <img src="./image/暂停.png" class="teli" />
                        <p class="timu"> 郭德纲单口相声精选</p>
                        <p class="zuozhe">德云社郭德纲相声VIP</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="content1-right right clear">
            <div class="cont2r-top">
                有声书新品
            </div>
            <ul>
                <li>
                    <a href="#" class="clear">
                        <div class="a-left left">
                            <img src="./image/喜欢3.PNG" alt="">
                            <img src="./image/暂停.png" alt="" class="zanting">
                        </div>
                        <div class="a-right left">
                            <p> [新品限免]&nbsp;&nbsp;黑轴|周建...</p>
                            <p> 周建龙&nbsp;|&nbsp;中广影音</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#" class="clear">
                        <div class="a-left left">
                            <img src="./image/喜欢5.PNG" alt="">
                            <img src="./image/暂停.png" alt="" class="zanting">
                        </div>
                        <div class="a-right left">
                            <p> [新品限免]&nbsp;&nbsp;黑轴|周建...</p>
                            <p> 周建龙&nbsp;|&nbsp;中广影音</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#" class="clear">
                        <div class="a-left left">
                            <img src="./image/喜欢2.PNG" alt="">
                            <img src="./image/暂停.png" alt="" class="zanting">
                        </div>
                        <div class="a-right left">
                            <p> [新品限免]&nbsp;&nbsp;黑轴|周建...</p>
                            <p> 周建龙&nbsp;|&nbsp;中广影音</p>
                        </div>
                    </a>
                </li>
                <li class="title-biaoti">
                    <span class="change"> 4</span>
                    <span class="change">&nbsp;&nbsp;德云社岳云鹏相声专场布里斯本站2...</span>
                </li>
                <li class="title-biaoti">
                    <span class="change"> 5</span>
                    <span class="change">&nbsp;&nbsp;德云六队&nbsp;|&nbsp;德云社经典相声合集</span>

                </li>
                <li class="title-biaoti">
                    <span class="change"> 6</span>
                    <span class="change">&nbsp;&nbsp;德云四队&nbsp;|&nbsp;德云社经典相声合集</span>

                </li>
            </ul>
        </div>
    </article>
    <!-- 内容3 end -->

    <!-- 内容4 start -->
    <div class="main wrap clear top30">
        <div class="main-left left clear">
            <div class="mle01 ">
                <div class="first-top clear left">
                    <h4 class="clear">
                        <a href="#" class="show-new left"> 热播榜</a>
                        <a href="#" class="show-new1 right">
                            <img src="./image/全部.png" alt="">
                        </a>
                    </h4>
                </div>
                <div class="first-top clear left">
                    <h4 class="clear">
                        <a href="#" class="show-new left" style="background: linear-gradient(#fff 0,#fff 36%,#f6a62399 37%,#f6a62399 100%);"> 新品榜</a>
                        <a href="#" class="show-new1 right">
                            <img src="./image/全部.png" alt="">
                        </a>
                    </h4>
                </div>
                <div class="first-top clear left">
                    <h4 class="clear">
                        <a href="#" class="show-new left" style="background: linear-gradient(#fff 0,#fff 36%,#4990e299 37%,#4990e299 100%);"> 付费畅销榜</a>
                        <a href="#" class="show-new1 right">
                            <img src="./image/全部.png" alt="">
                        </a>
                    </h4>
                </div>

            </div>
            <div class="mle02">
                <ul>
                    <li class="clear">
                        <div class="mle02-l left">
                            <div class="little"></div>
                        </div>
                        <div class="mle02-r left">
                            <p>郭德纲21年相声精选</p>
                            <p>德云社郭麒麟相声VIP</p>
                        </div>
                    </li>
                    <li class="clear">
                        <div class="mle02-l left">
                            <div class="little"></div>
                        </div>
                        <div class="mle02-r left">
                            <p>鲸块讯</p>
                            <p>新京报</p>
                        </div>
                    </li>
                    <li class="clear">
                        <div class="mle02-l left">
                            <div class="little"></div>
                        </div>
                        <div class="mle02-r left">
                            <p>爆笑米小圈</p>
                            <p>米小圈</p>
                        </div>
                    </li>
                    <li class="clear">
                        <div class="mle02-2 left">
                            <div class="little"></div>
                        </div>
                        <div class="mle02-r left">
                            <p>东方新闻</p>
                            <p>东方新闻</p>
                        </div>
                    </li>
                    <li class="clear">
                        <div class="mle02-2 left">
                            <div class="little"></div>
                        </div>
                        <div class="mle02-r left">
                            <p>澎湃人物</p>
                            <p>澎湃人物</p>
                        </div>
                    </li>
                    <li class="clear">
                        <div class="mle02-2 left">
                            <div class="little"></div>
                        </div>
                        <div class="mle02-r left">
                            <p>郭德纲21年相声精选</p>
                            <p>德云社郭麒麟相声VIP</p>
                        </div>
                    </li>
                    <li class="clear">
                        <div class="mle02-l left">
                            <div class="little"></div>
                        </div>
                        <div class="mle02-r left">
                            <p>东方新闻</p>
                            <p>东方新闻</p>
                        </div>
                    </li>
                    <li class="clear">
                        <div class="mle02-l left">
                            <div class="little"></div>
                        </div>
                        <div class="mle02-r left">
                            <p>郭德纲21年相声精选</p>
                            <p>德云社郭麒麟相声VIP</p>
                        </div>
                    </li>
                    <li class="clear">
                        <div class="mle02-l left">
                            <div class="little"></div>
                        </div>
                        <div class="mle02-r left">
                            <p>东方新闻</p>
                            <p>东方新闻</p>
                        </div>
                    </li>

                </ul>
            </div>
            <div class="mle03">
                <ul>
                    <li class="title-name">
                        <span class="change"> 4</span>
                        <span class="change">&nbsp;&nbsp;鲜快报</span>
                    </li>
                    <li class="title-name">
                        <span class="change"> 4</span>
                        <span class="change">&nbsp;&nbsp;深壹度：奥运人物志</span>
                    </li>

                    <li class="title-name">
                        <span class="change"> 4</span>
                        <span class="change">&nbsp;&nbsp;米小圈上学记</span>
                    </li>
                    <li class="title-name">

                        <span class="change"> 5</span>
                        <span class="change">&nbsp;&nbsp;小猪佩奇全集：一二三四季</span>
                    </li>
                    <li class="title-name">
                        <span class="change"> 5</span>
                        <span class="change">&nbsp;&nbsp;今晚80后脱口秀</span>
                    </li>

                    <li class="title-name">
                        <span class="change"> 5</span>
                        <span class="change">&nbsp;&nbsp;山海经 |三星堆丨神话故事丨奇...</span>
                    </li>
                    <li class="title-name">
                        <span class="change"> 6</span>
                        <span class="change">&nbsp;&nbsp;《斗破苍穹》20亿网络点击神作...</span>
                    </li>
                    <li class="title-name">
                        <span class="change"> 6</span>
                        <span class="change">&nbsp;&nbsp;易中天中华史 | 百家讲坛名师带...</span>
                    </li>

                    <li class="title-name">
                        <span class="change"> 6</span>
                        <span class="change">&nbsp;&nbsp; 天命赊刀人 | 道门神算</span>
                    </li>
                    <li class="title-name">
                        <span class="change"> 7</span>
                        <span class="change">&nbsp;&nbsp;《金瓶梅》评书 （免费版）每...</span>
                    </li>
                    <li class="title-name">
                        <span class="change"> 7</span>
                        <span class="change">&nbsp;&nbsp;德云社小园子相声集（高清经典...</span>
                    </li>

                    <li class="title-name">
                        <span class="change"> 7</span>
                        <span class="change">&nbsp;&nbsp;【新品限免】黑轴|周建龙演播...</span>
                    </li>
                    <li class="title-name">

                        <span class="change"> 8</span>
                        <span class="change">&nbsp;&nbsp;小猪佩奇全集：一二三四季</span>
                    </li>
                    <li class="title-name">
                        <span class="change"> 8</span>
                        <span class="change">&nbsp;&nbsp;今晚80后脱口秀</span>
                    </li>

                    <li class="title-name">
                        <span class="change"> 8</span>
                        <span class="change">&nbsp;&nbsp;山海经 |三星堆丨神话故事丨奇...</span>
                    </li>
                    <li class="title-name">
                        <span class="change"> 9</span>
                        <span class="change">&nbsp;&nbsp;《斗破苍穹》20亿网络点击神作...</span>
                    </li>
                    <li class="title-name">
                        <span class="change"> 9</span>
                        <span class="change">&nbsp;&nbsp;易中天中华史 | 百家讲坛名师带...</span>
                    </li>

                    <li class="title-name">
                        <span class="change"> 9</span>
                        <span class="change">&nbsp;&nbsp; 天命赊刀人 | 道门神算</span>
                    </li>
                    <li class="title-name">

                        <span class="change"> 10</span>
                        <span class="change">&nbsp;&nbsp;小猪佩奇全集：一二三四季</span>
                    </li>
                    <li class="title-name">
                        <span class="change"> 10</span>
                        <span class="change">&nbsp;&nbsp;今晚80后脱口秀</span>
                    </li>

                    <li class="title-name">
                        <span class="change"> 10</span>
                        <span class="change">&nbsp;&nbsp;山海经 |三星堆丨神话故事丨奇...</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="mian-right right clear">
            <div class="cont2r-top clear">
                <h4 class="left"> 有声书新品</h4>
                <a href="#" class="right">更多 ></a>
            </div>
            <ul>
                <li class="siliuji">
                    <img src="./image/长图片.png" alt="">
                    <h6>四六级冲刺计划</h6>
                    <a href="#">
                        <img src="./image/四六级.PNG" alt=""> <span>6张专辑</span>
                    </a>
                </li>
                <li>
                    <a href="#" class="clear">
                        <div class="mrl left">
                            <img src="./image/喜欢3.PNG" alt="">
                        </div>
                        <div class="mlr left">
                            <h6>热播剧《生活家》| 快乐在于生活本身</h6>
                            <p><img src="./image/音频.PNG" alt="">
                                <span>6首声音</span></p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#" class="clear">
                        <div class="mrl left">
                            <img src="./image/喜欢3.PNG" alt="">
                        </div>
                        <div class="mlr left">
                            <h6>热播剧《生活家》| 快乐在于生活本身</h6>
                            <p><img src="./image/音频.PNG" alt="">
                                <span>6首声音</span></p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#" class="clear">
                        <div class="mrl left">
                            <img src="./image/喜欢3.PNG" alt="">
                        </div>
                        <div class="mlr left">
                            <h6>热播剧《生活家》| 快乐在于生活本身</h6>
                            <p><img src="./image/音频.PNG" alt="">
                                <span>6首声音</span></p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#" class="clear">
                        <div class="mrl left">
                            <img src="./image/喜欢3.PNG" alt="">
                        </div>
                        <div class="mlr left">
                            <h6>热播剧《生活家》| 快乐在于生活本身</h6>
                            <p><img src="./image/音频.PNG" alt="">
                                <span>6首声音</span></p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 内容4 end -->
    <!-- 底部footer start -->
    <footer class="wrap">
        <div class="footer-nav clear top30">
            <div class="tubiao clear">
                <ul>
                    <li>
                        <div class="top001"><img class="toowigh" src="../喜马拉雅/image/logo-1.png" alt=""></div>
                        <span>开放平台</span>
                        <p>对接海量精彩内容</p>
                    </li>
                    <li>
                        <div class="top001"><img src="../喜马拉雅/image/logo-2.png" alt=""></div>
                        <span>云剪辑</span>
                        <p>在线音频剪辑神奇</p>
                    </li>
                    <li>
                        <div class="top001"><img src="../喜马拉雅/image/logo-3.jpg" alt=""></div>
                        <span>喜马拉雅大学</span>
                        <p>主播梦想孵化基地</p>
                    </li>
                    <li>
                        <div class="top001"><img src="../喜马拉雅/image/logo-4.png" alt=""></div>
                        <span>小雅智能</span>
                        <p>智能硬件，连接赋能</p>
                    </li>
                    <li>
                        <div class="top001"><img src="../喜马拉雅/image/logo-5.png" alt=""></div>
                        <span>车联网平台</span>
                        <p>自在出行，听我想听</p>
                    </li>
                    <li>
                        <div class="top001"><img src="../喜马拉雅/image/logo-6.png" alt=""></div>
                        <span>企业版</span>
                        <p>员工学习，企业买单</p>
                    </li>
                    <li class="last-c">
                        <div class="top01">
                            <span>手机端</span>
                            <img src="../喜马拉雅/image/二维码1.png" alt="">
                        </div>
                        <div class="top02">
                            <span>电脑端</span>
                            <img src="../喜马拉雅/image/下载.png" alt="">
                        </div>
                    </li>
                </ul>
            </div>

        </div>
        <hr>
        <div class="footer-fot clear ">
            <div class="foot-fot1">
                <span>喜马拉雅是专业的音频分享平台，汇集了有声小说、有声读物、有声书、儿童睡前故事、相声小品、鬼故事等数亿条音频。随时随地，听我想听。</span>
                <img src="../喜马拉雅/image/d_a.gif" alt="">
            </div>
            <div class="foot-fot2">
                <span>地址：上海市浦东新区张江丹桂路799号国创中心三期1-2号楼 客服热线：400-838-5616 举报电话：400-838-5616 《举报受理和处置管理办法》</span>
                <img src="../喜马拉雅/image/d_a.gif" alt="">
            </div>
            <div class="foot-fot3 clear">
                <span>Copyright © 2012-2021 www.ximalaya.com lnc.ALL Rights Reserved</span>
                <i class="xiegang fot3-size left"></i>
                <img src="../喜马拉雅/image/logo-7.png" alt="">
                <a href="#">上海互联网举报中心</a>
                <i class="xiegang fot3-size left"></i>
                <img src="../喜马拉雅/image/logo-8.png" alt="">
                <a href="#">网上有害信息举报专区</a>
                <i class="xiegang fot3-size left"></i>
                <img src="../喜马拉雅/image/logo-9.png" alt="" class="footer-img3">
            </div>
            <div class="foot-fot4  clear">
                <ul>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">联系我们</a><i class="xiegang footer-fotlast"></i></li>
                    <li><a href="#">求助</a><i class="xiegang footer-fotlast"></i></li>
                    <li><a href="#">辟谣</a><i class="xiegang footer-fotlast"></i></li>
                    <li><a href="#">公司新闻</a><i class="xiegang footer-fotlast"></i></li>
                    <li><a href="#">招贤纳士</a><i class="xiegang footer-fotlast"></i></li>
                    <li><a href="#">用户反馈</a><i class="xiegang footer-fotlast"></i></li>
                    <li><a href="#">用户服务协议</a><i class="xiegang footer-fotlast"></i></li>
                    <li><a href="#">隐私政策</a><i class="xiegang footer-fotlast"></i></li>
                    <li><a href="#">版权声明</a><i class="xiegang footer-fotlast"></i></li>
                    <li><a href="#">直播平台</a><i class="xiegang footer-fotlast"></i></li>
                    <li><a href="#">自律承诺</a><i class="xiegang footer-fotlast"></i></li>
                </ul>
            </div>

        </div>
    </footer>
    <!-- 底部 footer end -->
    <!-- 侧边栏固定定位start -->
    <div class="dlpc-Tu">
        <img src="./image/图片logo.png" alt="" class="logo-img">
        <div class="text-Tu">云端同步、一键下载 更好的收听体验！</div>
        <a href="#" class="device-btn">下载客户端</a>
    </div>
    <!-- 侧边栏固定定位end -->
</body>

</html>